<template>
    <div>
        <div class="middle-box">
            <myTitle title="喷淋泵"></myTitle>
            <div class="middle-fire-chart" ref="fireChartRef"></div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <middleEcharts
                        :data="autoData"
                        :chatTitle="'自动状态'"
                    ></middleEcharts>
                </el-col>
                <el-col :span="8">
                    <middleEcharts
                        :data="breakdownData"
                        :chatTitle="'故障状态'"
                        :chartColor="['#fc8452', '#3ba272']"
                    ></middleEcharts>
                </el-col>
                <el-col :span="8">
                    <middleEcharts
                        :data="operationData"
                        :chatTitle="'运行状态'"
                        :chartColor="['#ea7ccc', '#9a60b4']"
                    ></middleEcharts>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import myTitle from "../../components/title.vue";
import middleEcharts from "./components/middleEcharts.vue";
import {
    getWaterPipePressureStatistics,
    getPropertyState,
} from "@/api/sendhttp/baKanban";
import pieJson from "./pie2.json";
export default {
    components: { myTitle, middleEcharts },
    name: "middleBox",
    data() {
        return {
            autoData: [],
            breakdownData: [],
            operationData: [],
        };
    },
    created() {},
    mounted() {
        // this.initFireChart();
        this.getData();
        this.getCakeData();
    },
    methods: {
        async getCakeData() {
            const {
                data: { code, data, msg },
            } = await getPropertyState({ deviceType: "SHSB_PLB" });
            // console.log(pieJson);
            // const { code, data, msg } = pieJson;
            // console.log(data);
            if (code === "200") {
                this.autoData = this.mapData(data, "自动状态");
                this.breakdownData = this.mapData(data, "故障状态");
                this.operationData = this.mapData(data, "运行状态");
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        mapData(data, key) {
            return data[key].map((item) => ({
                value: item.total,
                name: item.name,
            }));
        },

        async getData() {
            const {
                data: { code, data, msg },
            } = await getWaterPipePressureStatistics({ pipeType: "SHSB_PLB" });
            if (code === "200") {
                // this.chartData = data;
                this.initFireChart(data);
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        initFireChart(e) {
            const xData = e.map((item) => {
                return item.object_cn_name;
            });
            const yData = e.map((item) => {
                return item.pressure;
            });
            var chartBox = this.$refs.fireChartRef;
            let myChart = this.$echarts.getInstanceByDom(
                this.$refs.fireChartRef
            );
            if (myChart == null) {
                myChart = this.$echarts.init(chartBox);
            }
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ["水管压力"],
                    left: "center",
                    top: "10",
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisTick: {
                            alignWithLabel: true,
                        },
                        // axisLabel: {
                        //     //X轴字体倾斜设置
                        //     interval: 0,
                        //     rotate: 30, //倾斜的程度
                        // },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "水管压力",
                        type: "bar",
                        barWidth: "30",
                        color: "#68bbc4",
                        data: yData,
                        label: {
                            show: true, //开启显示
                            position: "top", //在顶部显示
                            textStyle: {
                                color: "#68bbc4",
                                fontSize: 16,
                            },
                        },
                        // itemStyle: {
                        //     normal: {
                        //         //设置顶部字体
                        //         label: {
                        //             show: true, //开启显示
                        //             position: "top", //在顶部显示
                        //             textStyle: {
                        //                 color: "#4cc8f5",
                        //                 fontSize: 16,
                        //             },
                        //         },
                        //     },
                        // },
                    },
                ],
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.middle-box {
    height: 400px;
    background-color: rgba(241, 243, 245, 1);
    .middle-fire-chart {
        height: 200px;
        width: 100%;
    }
}
</style>
